<template>
	<view class="content">
		<view class="top">
			<view class="head">
				<u--image :src="img" shape="circle" height="80" width="80"></u--image>
			</view>
			<view class="name">
				<view id="college">{{college}}</view>
				<view id="name">{{name}}</view>
			</view>
		</view>
		<view class="middle">
			<view class="tiele">
				<view class="front">总统计数据</view>
				<view class="behind">打扫历史 &gt;</view>
			</view>
			<view class="box">
				<view class="minBox">
					学期目标(次)<br>{{info.termGoal}}
				</view>
				<view class="minBox">
					已完成(次)<br>{{info.completed}}
				</view>
				<view class="minBox">
					参与人数(人)<br>{{info.number}}
				</view>
			</view>
		</view>
		<view class="last">		
			<view class="circle" @click="volunteer(2)">
				<view class="img">
					<u--image :src="src[1]" width="50px" height="50px"></u--image>
				</view>
				签到
			</view>
			<view class="circle" @click="volunteer(1)">
				<view class="img_special">
					<u--image :src="src[0]" width="40px" height="40px"></u--image>
				</view>
				发布
			</view>
			<view class="circle" @click="volunteer(3)">
				<view class="img_special">
					<u--image :src="src[2]" width="40px" height="40px"></u--image>
				</view>
				志愿活动
			</view>
			<view class="circle" @click="volunteer(4)">
				<view class="img">
					<u--image :src="src[3]" width="50px" height="50px"></u--image>
				</view>
				排行榜
			</view>
			<view class="circle" @click="volunteer(5)">
				<view class="img_special">
					<u--image :src="src[4]" width="40px" height="40px"></u--image>
				</view>
				活动发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: '/static/releaseTask.png', // 头像地址
				src: [	// 图标
					'/static/releaseTask.png',
					'/static/signIn.png',
					'/static/voluntaryActivity.png',
					'/static/rankingIist.png',
					'/static/releaseActivity.png'
				],
				college: '电子与信息工程学院',	// 学院
				name: '一禅小和尚',		// 名字
				info: {		// 总统计数据
					termGoal: '10',
					completed: '10',
					number: '120'
				}
			}
		},

		methods: {
			// 页面跳转
			volunteer(key) {
				switch (key) {
					case 1:
						uni.navigateTo({
							url: './releaseCheck'
						})
						break;
					case 2:
						uni.navigateTo({
							url: './signDesk'
						})
						break;
					case 3:
						uni.navigateTo({
							url: './volunteer'
						})
						break;
					case 4:
						uni.navigateTo({
							// url: './volunteer'
						})
						break;
					case 5:
						uni.navigateTo({
							url: './createActivities'
						})
						break;

					default:
						break;
				}

			}
		},
	}
</script>

<style lang="scss">
	.content {
		font-family: 'KaiTi_GB2312', Courier, monospace;
	}
	// 个人信息模块
	.top {
		display: flex;
		width: 94%;
		height: 240rpx;
		margin: 20rpx 3%;
		border-radius: 20rpx;
		box-shadow: 0px 0px 8px #8cb7ffc7;
	}

	.head {
		box-sizing: border-box;
		height: 200rpx;
		width: 200rpx;
		padding: 20rpx;
	}

	.name {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column-reverse;
	}

	#name,
	#college {
		width: 100%;
		height: 100rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		font-size: 36rpx;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	}

	// 统计数据模块
	.middle {
		width: 94%;
		height: 300rpx;
		margin: 30rpx 3%;
		border-radius: 20rpx;
		box-shadow: 0px 0px 8px #8cb7ffc7;
	}

	.tiele {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		padding-right: 30rpx;
		box-sizing: border-box;

		.front {
			height: 100%;
			margin: 10rpx;
		}

		.behind {
			height: 100%;
			line-height: 80rpx;
		}
	}

	.box {
		display: flex;

		.minBox {
			height: 140rpx;
			width: 30%;
			margin: 40rpx 1.5%;
			// border: 1rpx solid black;
			border-radius: 20rpx;
			box-sizing: border-box;
			text-align: center;
			box-shadow: 0px 0px 8px #c6c6c6;
			padding-top: 20rpx;
		}
	}

	//
	.last {
		display: flex;
		flex-wrap: wrap;
		border-radius: 40rpx;
		width: 94%;
		margin: 0 3%;
		margin-top: 20rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		box-shadow: 0px 0px 8px #8cb7ffc7;

		.circle {
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			height: 48%;
			width: 21%;
			padding: 1%;
			margin: 2%;
			text-align: center;
			border-radius: 20rpx;
			box-shadow: 0px 0px 8px #c6c6c6;
			.img, .img_special {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.img {
				height: 100rpx;
				width: 100rpx;
				margin: 10rpx auto;
			}
			.img_special {
				height: 80rpx;
				width: 80rpx;
				margin: 20rpx auto;
			}
		}
	}
</style>
